<template>
    <div :class="visible?'importer-on':'importer-off'" class="text-card basic-shadow">
        <div class="relative-wrapper">
            <i class="el-icon-close close-btn"
               style="z-index: 5"
               @click="closeResolver"></i>
        </div>
        <el-input id="importer"
                  type="textarea"
                  v-model="text"
                  v-loading="loading"
                  placeholder="文本解析器：在此输入需要解析的文字"
                  :row="10"
                  :autosize="{ minRows: 10, maxRows: 18}"
                  show-word-limit
                  clearable
        >
        </el-input>
        <div class="relative-wrapper">
            <el-button class="resolve-button"
                       @click="resolve"
                       type="primary"
                       icon="el-icon-data-analysis"
                       circle></el-button>
        </div>
    </div>
</template>

<script>
    import {mapActions} from "vuex";

    export default {
        name: "textImporter",
        inject:["reload1"],
        data() {
            return {
                text: "",
                loading: false
            };
        },
        props: {
            // 使用从父组件传来的属性值visible
            visible: {
                type: Boolean,
                default: true
            },
            graphId: {
                type: Number,
                default: null
            }
        },
        methods: {
            ...mapActions([
                "resolveText"
            ]),
            closeResolver() {
                this.$emit("close");
            },
            resolve() {
                this.loading = true;
                this.resolveText({graph_id: this.graphId, input: this.text}).then((result) => {
                  this.reload1();
                });
            }
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/transition.css";
    @import "../../assets/styles/homePage.css";

    .text-card {
        position: absolute;
        margin: 5px;
        padding: 10px;
        bottom: 0;

        height: auto;
        width: 25%;
        border-radius: 5px;
        background-color: #f5f7fa;

        overflow: hidden;
        z-index: 4;
    }


</style>